<template>
	<div>
		<div class="image-view" v-if="images.length">
			<template v-for="(item, index) in images">
				<a v-if="item.link" :href="`${item.link}${extQueryId}`" :key="'link' + index">
					<img :src="`${item.url}`" :alt="item.name" />
				</a>
				<img v-else :src="`${item.url}`" :alt="item.name" :key="index" @click.stop="handleClick"/>
			</template>
		</div>
		<van-dialog
		class="dialog"
		v-model="show"
		get-container="#app"
		@opened=""
		:show-confirm-button="false"
		>
		<div class="copy-content" :class="{ margin: $slots.default }">
			<template>
			<van-button
			style="font-size: 19px;"
				type="primary"
				block
				icon="wechat"
				class="open-wx"
				@click=""
			>
				打开微信添加客服
			</van-button>
			</template>
		</div>
		<div class="dialog-actions van-hairline--top no-select">
			<van-button class="cancel" size="large" @click="close"> 关闭 </van-button>
			<van-button
			class="confirm van-hairline--left"
			size="large"
			@click="onConfirm"
			>
			前往
			</van-button>
		</div>
		</van-dialog>
	</div>
</template>
<script>
import { clickIdKeys } from '@/config'
export default {
	name: 'image-view',
	props: {
		view: {
			type: Object,
			default: () => ({}),
		},
	},
	data() {
		return {
			show: false
		};
	},
	computed: {
		options() {
			return this.view.options
		},
		images() {
			return this.options.images || []
		},
		extQueryId() {
			const { query } = this.$route
			let url = ''

			for (let key in query) {
				if (clickIdKeys.includes(key)) {
					url = url + `&${key}=${query[key]}`
				}
			}

			return url
		},
	},
	methods: {
		async handleClick(ev) {
			const { click_type, is_dialog } = this.options;

			if (click_type == 1) {
				if (is_dialog == 1) {
					this.show = true;
				}
				else {
					this.skipAdMp(this.options)
				}
			}
			return;
		},
		close() {
			this.show = false;
		},
		onConfirm() {
			this.skipAdMp(this.options)
			return;
		}
	}
}
</script>
<style lang="scss" scoped>
.image-view {
	min-height: 50px;
	img {
		width: 100%;
		vertical-align: middle;
		font-size: 0;
	}
}
.dialog-actions {
    display: flex;
    overflow: hidden;
    .confirm,
    .cancel {
      flex: 1;
      margin: 0;
      border: 0;
      font-size: 0.41111rem;
    }
    .cancel,
    .cancel:active {
      color: #909399;
    }
    .confirm,
    .confirm:active {
      color: #ee0a24;
    }
  }
</style>
